<!--
 * @Author: Mr.Li
 * @Date: 11/22/2024 13:57
 * @Description: HeaderCard
-->
<template>
  <div class="header">
    <div class="left">
      <div class="logo-wrapper">
        <img src="./assets/bg-logo.png" alt="" />
      </div>
      <div class="line1"></div>
      <div class="line2"></div>
    </div>
    <div class="center">
      <div class="title">{{ title }}</div>
      <img src="./assets/bg-header-light.png" alt="" />
    </div>
    <div class="right">
      <div class="logo-wrapper">
        <img src="./assets/bg-tianyi-logo.png" alt="" />
      </div>
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="time">{{ time }}</div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      time: '',
    }
  },
  methods: {},
  mounted() {
    this.time = dayjs().format('YYYY年MM月DD日 HH:mm:ss')
    setInterval(() => {
      this.time = dayjs().format('YYYY年MM月DD日 HH:mm:ss')
    }, 1000)
  },
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //border: 1px dashed white;
  padding: 0.5vw 0;

  .left {
    padding-left: 4vw;
    position: relative;

    img {
      height: 2.4vw;
    }

    .line1 {
      @mixin common() {
        display: inline-block;
        content: '';
        width: 0.09vw;
        height: 1.6vw;
        background: #3a8c9d;
        transform: rotate(-40deg);
        position: absolute;
        bottom: -0.5vw;
      }

      &:before {
        @include common();
        left: 0.8vw;
      }

      &:after {
        @include common();
        left: 1.4vw;
      }
    }

    .line2 {
      @mixin common() {
        display: inline-block;
        content: '';
        height: 0.085vw;
        background: #3a8c9d;
        position: absolute;
      }

      &:before {
        @include common();
        left: 1.9vw;
        bottom: -0.35vw;
        width: 20vw;
      }

      &:after {
        @include common();
        width: 8vw;
        left: 0.5vw;
        bottom: -2vw;
      }
    }
  }

  .center {
    position: relative;
    //border: 1px dashed white;
    padding: 0.5vw 0;

    .title {
      font-size: 1.85vw;
      font-weight: bold;
      letter-spacing: 0.2vw;
    }

    img {
      position: absolute;
      top: 1vw;
      //width: 100%;
      height: 5.4vw;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .right {
    padding-right: 4vw;
    position: relative;

    img {
      height: 2.4vw;
    }

    .time {
      position: absolute;
      right: 0.8vw;
      bottom: -1.7vw;
      font-size: 0.65vw;
    }

    .line1 {
      @mixin common() {
        display: inline-block;
        content: '';
        width: 0.09vw;
        height: 1.6vw;
        background: #3a8c9d;
        transform: rotate(40deg);
        position: absolute;
        bottom: -0.5vw;
      }

      &:before {
        @include common();
        right: 0.8vw;
      }

      &:after {
        @include common();
        right: 1.4vw;
      }
    }

    .line2 {
      @mixin common() {
        display: inline-block;
        content: '';
        background: #3a8c9d;
        position: absolute;
        height: 0.085vw;
      }

      &:before {
        @include common();
        right: 1.9vw;
        bottom: -0.35vw;
        width: 20vw;
      }

      &:after {
        @include common();
        width: 8vw;
        right: 0.5vw;
        bottom: -2vw;
      }
    }
  }
}
</style>
